<template>
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="维修记录编号">
        <el-input v-model="searchForm.serviceNumber" placeholder="维修记录编号" clearable />
      </el-form-item>
      <el-form-item label="车辆编号">
        <el-input v-model="searchForm.vehicleId" placeholder="车辆编号" clearable />
      </el-form-item>
      <el-form-item label="维修日期">
        <el-date-picker
        v-model="searchForm.maintenanceDate"
        type="date"
        placeholder="选择日期"
        :default-value="new Date(2024, 9, 1)"
      />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="PageList">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="dialogTableVisible = true">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column property="serviceNumber" label="维修记录编号" width="130"/>
        <el-table-column property="vehicleId" label="车辆编号" width="130" />
        <el-table-column property="faultDescription" label="故障描述" width="170" show-overflow-tooltip />
        <el-table-column property="maintenanceContent" label="维修内容" width="160"/>
        <el-table-column property="maintenanceCost" label="维修费用" width="130"/>
        <el-table-column property="maintenanceDate" label="维修日期" width="130"/>
        <!-- <el-table-column prop="founder" label="创建人" width="80" /> -->
        <el-table-column prop="founderDate" label="创建时间" width="130" />
        <!-- <el-table-column prop="modifier" label="修改人" width="80" /> -->
        <el-table-column prop="modifierDate" label="修改时间" width="110" />
        <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" type="warning" @click="maintenanceList(scope.row.id)">
          修改
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="openDelete"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
    </el-table>

    <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[5, 10, 15]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="->, total, sizes, prev, pager, next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

  <el-dialog v-model="dialogFormVisible" title="修改维修记录" width="500">
    <el-form :model="form">
      <el-form-item label="维修记录编号" :label-width="formLabelWidth">
        <el-input v-model="form.serviceNumber" autocomplete="off" />
      </el-form-item>
      <el-form-item label="车辆编号" :label-width="formLabelWidth">
        <el-input v-model="form.vehicleId" autocomplete="off" />
      </el-form-item>
      <el-form-item label="故障描述" :label-width="formLabelWidth">
        <el-input v-model="form.faultDescription" autocomplete="off" />
      </el-form-item>
      <el-form-item label="维修内容" :label-width="formLabelWidth">
        <el-input v-model="form.maintenanceContent" autocomplete="off" />
      </el-form-item>
      <el-form-item label="维修费用" :label-width="formLabelWidth">
        <el-input v-model="form.maintenanceCost" autocomplete="off" />
      </el-form-item>
      <el-form-item label="维修日期" :label-width="formLabelWidth">
        <el-date-picker v-model="form.maintenanceDate" type="date" placeholder="选择日期" :default-value="new Date(2024, 9, 1)" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="maintenanceUpdate">
          修改
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogTableVisible" title="添加维修记录" width="500">
    <el-form :model="form_add">
      <el-form-item label="维修记录编号" :label-width="formLabelWidth">
        <el-input v-model="form_add.serviceNumber" autocomplete="off" />
      </el-form-item>
      <el-form-item label="车辆编号" :label-width="formLabelWidth">
        <el-input v-model="form_add.vehicleId" autocomplete="off" />
      </el-form-item>
      <el-form-item label="故障描述" :label-width="formLabelWidth">
        <el-input v-model="form_add.faultDescription" autocomplete="off" />
      </el-form-item>
      <el-form-item label="维修内容" :label-width="formLabelWidth">
        <el-input v-model="form_add.maintenanceContent" autocomplete="off" />
      </el-form-item>
      <el-form-item label="维修费用" :label-width="formLabelWidth">
        <el-input v-model="form_add.maintenanceCost" autocomplete="off" />
      </el-form-item>
      <el-form-item label="维修日期" :label-width="formLabelWidth">
        <el-date-picker v-model="form_add.maintenanceDate" placeholder="选择日期" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="xiao" >取消</el-button>
        <el-button type="primary" @click="maintenanceAdd">
          添加
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox, ElTable } from 'element-plus'
import { ref, reactive, onMounted  } from 'vue'
import type { ComponentSize } from 'element-plus'
import { pageList, addMaintenance, updateMaintenance, deleteMaintenance, getMaintenanceList } from '../api/maintenance.js'

const currentPage4 = ref(1)
const pageSize4 = ref(5)
const total = ref(0)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive({
  serviceNumber: '',
  vehicleId: '',
  faultDescription: '',
  maintenanceContent: '',
  maintenanceCost: '',
  maintenanceDate: '',
})

const form_add = reactive({
  serviceNumber: '',
  vehicleId: '',
  faultDescription: '',
  maintenanceContent: '',
  maintenanceCost: '',
  maintenanceDate: '',
})

const reset = ()=>{
  form_add.serviceNumber = '',
  form_add.vehicleId = '',
  form_add.faultDescription = '',
  form_add.maintenanceContent = '',
  form_add.maintenanceCost = '',
  form_add.maintenanceDate = ''
}

const handleSizeChange = (val: number) => {
  pageSize4.value = val;
  PageList();
};

const handleCurrentChange = (val: number) => {
  currentPage4.value = val;
  PageList();
};

const xiao = ()=>{
  dialogTableVisible.value = false,
  reset()
}

const searchForm = reactive({
vehicleId: '',
serviceNumber: '',
maintenanceDate: '',
})
const tableData = ref([])

const PageList = async()=>{
  const payload = {
    page: currentPage4.value,
    pageSize: pageSize4.value,
    vehicleId: searchForm.vehicleId,
    serviceNumber: searchForm.serviceNumber,
    maintenanceDate: searchForm.maintenanceDate
  }
  console.log(payload)
  try{
    const result = await pageList(payload);
    console.log(result)
    if(result.data.code === 200){
      total.value = result.data.data.total;
      tableData.value = result.data.data.recodes;
      ElMessage.success('维修列表')
    }
  }catch(error){
    ElMessage.error('内部数据出错，请稍后重试')
  }
}

const maintenanceAdd = async()=>{
  try{
    const result = await addMaintenance(form_add);
    if(result.data.code === 200){
      ElMessage.success('添加成功');
      reset()
    }
  }catch(error){
    ElMessage.error('添加失败')
    reset()
  }
  dialogTableVisible.value = false
}

const maintenanceList = async(id: number)=>{
  dialogFormVisible.value = true;
  try{
    const result = await getMaintenanceList(id);
    if(result.data.code === 200){
      const data = result.data.data[0];
      Object.assign(form, data)
    }
  }catch(error){
    ElMessage.error('显示出错，请检查网络')
  }
}

const maintenanceUpdate = async()=>{
  dialogFormVisible.value = false;
  try{
    const result = await updateMaintenance(form);
    if(result.data.code === 200){
      ElMessage.success('修改成功');
      PageList();
    }
  }catch(error){
    ElMessage.error("修改失败")
  }
}

const openDelete = (id: number) => {
  ElMessageBox.confirm(
    '确定删除该车辆信息?',
    '温馨提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      const result = await deleteMaintenance(id);
      if (result.data.code === 200) {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      };
      PageList();
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

onMounted(()=>{
  PageList()
})
</script>

<style scoped>
.demo-form-inline .el-input {
  width: 200px;
}

.demo-form-inline .el-select {
  width: 200px;
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

.type-status-class {
  color: #fff;
  padding: 3px 8px;
  border-radius: 10px;
  display: inline-block;
  width: 60px;
  text-align: center;
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>